import { Switch, Modal, Form, Input, Select, Space, Button } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { addSchool } from '../../../api/school';
import { messageApi } from '../../../utils/message';


interface ModalProps {
    visible: boolean;
    manufacturerList?: { value: number, label: string }[]
    handleCancel: () => void
    callback: () => void
}

const SchoolsModal = (props: ModalProps) => {
    const { visible, manufacturerList, handleCancel, callback } = props
    const [form] = Form.useForm();

    const handleOk = () => {
        form
            .validateFields()
            .then(async (res) => {
                const next = { ...res, status: Number(res.status) }

                await addSchool(next)
                form.resetFields()
                messageApi.success('创建学校成功！')
                callback()
            })
            .catch((err) => console.log('新建厂商发生错误:', err));
    }


    return (
        <Modal
            title="新建学校"
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={visible}
            onOk={handleOk}
            onCancel={handleCancel}
            width={800}
        >
            <div className='mt-10'>
                <Form
                    name="basic"
                    layout='horizontal'
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                    form={form}
                >
                    {manufacturerList && manufacturerList?.length > 0 &&
                        <Form.Item label="所属厂商" name="manufacturer_id">
                            <Select
                                options={manufacturerList}
                            />
                        </Form.Item>}
                    <Form.Item
                        label="学校名称"
                        name="name"
                        rules={[{ required: true, message: '请输入学校名称!' }]}
                    >
                        <Input placeholder='请填写学校名称' />
                    </Form.Item>

                    <Form.Item
                        label="类型"
                        name="type"
                        rules={[{ required: true, message: '请选择学校类型!' }]}
                    >
                        <Select
                            placeholder='请选择学校类型'
                            options={[
                                { value: 0, label: '幼儿园' },
                                { value: 1, label: '小学' },
                                { value: 2, label: '初中' },
                                { value: 3, label: '高中' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="学年制"
                        name="education_years"
                        rules={[{ required: true, message: '请选择学年制!' }]}

                    >
                        <Select
                            placeholder='请选择学年制'
                            options={[
                                { value: 3, label: '三年制' },
                                { value: 6, label: '六年制' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="status" label='状态' valuePropName="checked">
                        <Switch checkedChildren="启用" unCheckedChildren="禁用" defaultChecked />
                    </Form.Item>
                    <Form.Item label='年级信息' tooltip={{ title: '非必填项，后续可单独添加年级信息。' }}>

                        <Form.List name="grades">
                            {(fields, { add, remove }) => (
                                <>
                                    {fields.map(({ key, name, ...restField }) => (
                                        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                            <Form.Item
                                                {...restField}
                                                name={[name, 'grade']}
                                                rules={[{ required: true, message: '请填写年级信息' }]}
                                            >
                                                <Input placeholder="年级" />
                                            </Form.Item>
                                            <Form.Item
                                                {...restField}
                                                name={[name, 'class']}
                                                rules={[{ required: true, message: '请填写班级信息' }]}
                                            >
                                                <Input placeholder="班级" />
                                            </Form.Item>
                                            <MinusCircleOutlined onClick={() => remove(name)} />
                                        </Space>
                                    ))}
                                    <Form.Item>
                                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                            添加年级
                                        </Button>
                                    </Form.Item>
                                </>
                            )}
                        </Form.List>
                    </Form.Item>

                </Form>
            </div>
        </Modal>
    )
};

export default SchoolsModal;
